define([
    'jquery',
    'jquery-cookie'
], function ($) {
    // 登录功能
    function orderLogin(){
        if($.cookie('account')){
            $('#unloginList').hide();
            $('#userList').show();
            // 把用户名插入
            $('#loginName').html($.cookie('account'));
        }
    }

    // 全选功能
    function checkAll() {
        // 设置动态改变的单选复选框的数量
        var len = 0;
        var chooseSum = 0;
        var total = 0;

        // 1. 点击全选复选框, 所有单选复选框显示选中
        // 点击全选复选框时
        $('.checkbox').on('click', function () {
            total = 0;
            // console.log($('#selectAll').is(":checked"));
            if ($('#selectAll').is(":checked")) {
                // 未选中状态
                $(this).removeClass('checked');
                // 取消全选按钮取消选中全部按钮
                $('.checkbox').add('.itembox').removeClass('checked');
                $('.select').prop('checked', false);
                // 已选中chooseSum件
                $('#chooseCount').html(0);
                chooseSum = 0;
                // 更新合计
                total = 0;
                totalUpdate('0.00');
            } else {
                // 选中状态
                $(this).addClass('checked');
                // 点击全选按钮选中全部按钮
                $('.checkbox').add('.itembox').addClass('checked');
                $('.select').prop('checked', true);
                // 已选中chooseSum件
                if ($.cookie('goods')) {
                    var arr = JSON.parse($.cookie('goods'));
                    // console.log(arr);
                    // 把对象中的num都加起来
                    var res = 0;
                    arr.forEach(item => {
                        res += item.num;
                    });
                    // 更新选中商品数量
                    chooseSum = res;
                    // console.log(chooseSum);
                    // 共res件商品
                    $('#chooseCount').html(res);
                } else {
                    $('#chooseCount').html(res);
                }
                // 更新合计
                $.each($('#cartOrderBody').find('.cart-total-txt'), function (index, item) {
                    total += +item.innerHTML;
                });
                // console.log(total);
                totalUpdate(total);
                // 点击删除选中的商品按钮时
                $('#deleteAll').on('click', function () {
                    // 清空cookie
                    $.cookie('goods', null, { path: '/' });
                    // 删除所有tr
                    $('#cartOrderBody').html('');
                    // 更新商品数量
                    sum();
                    // 更新选择的商品
                    $('#chooseCount').html(0);
                });
            }
            len = $('#selectAll').is(":checked") ? 0 : $('.itembox').size();
            // console.log(len);
        });

        // 2. 当单选复选框的数量等于所有单选复选框的数量时, 全选复选框显示选中
        // 点击单选复选框时
        $('#cartOrderBody').on('click', '.itembox', function () {
            if ($(this).siblings('.select').is(":checked")) {
                // 单选复选框未选中状态
                $(this).removeClass('checked');
                chooseSum = chooseSum - $(this).parents('.cart-goods').find(':text').val();
                // 更新合计
                total += -$(this).closest('tr').find('.cart-total-txt').html();
                totalUpdate(total);
            } else {
                // 单选复选框选中状态
                $(this).addClass('checked');
                // 更新选中商品数量
                // console.log($(this).parents('.cart-goods').find(':text').val());
                chooseSum += +$(this).parents('.cart-goods').find(':text').val();
                // 更新合计
                // 遍历选中的商品小计
                // console.log($(this).closest('tr').find('.cart-total-txt').html());
                total += +$(this).closest('tr').find('.cart-total-txt').html();
                totalUpdate(total);
            }
            $(this).siblings('.select').is(":checked") ? len-- : len++;
            // console.log(len);
            // 如果商品的所有复选框选中的数量等于所有商品复选框的数量
            if (len === $('.itembox').size()) {
                $('.checkbox').addClass('checked');
                $('#selectAll').prop('checked', true);
            } else {
                $('.checkbox').removeClass('checked');
                $('#selectAll').prop('checked', false);
            }
            // 已选中chooseSum件
            $('#chooseCount').html(chooseSum);
        });

        // 购物车订单内商品的数量
        function sum() {
            if ($.cookie('goods')) {
                var arr = JSON.parse($.cookie('goods'));
                // console.log(arr);
                // 把对象中的num都加起来
                var res = 0;
                arr.forEach(item => {
                    res += item.num;
                });
                // console.log(res);
                // 共res件商品
                $('#allCount').html(res);
            } else {
                $('#allCount').html(0);
            }
        }
    }

    // 更新合计
    function totalUpdate(totalSum) {
        $('#cartFooterTotal').html(`￥${totalSum}`);
    }

    // 购物车订单
    function addShopcar() {
        // 进入页面就渲染购物车订单数据
        shopcarRender();
        sum();

        // 当点击商品中的加入购物车时, 购物车订单新增一件商品
        $('#goodsList').on('click', '.add-cart', function () {
            var id = $(this).attr('id');
            // 点击加入购物车时
            /*
                有三种情况: 
                    1. cookie为空      设置cookie  
                    2. cookie有值      [{id: 0, num: 1}]
                        2.1 [{id: 0, num: 1}]    id相同, 数量++
                        2.2 [{id: 1, num: 1}]    id不同, 新建一个对象push进arr

                if(判断是否是第一次存储){
                    设置cookie
                }else{
                    if(判断之前是否添加过){// id相同
                        数量 + 1
                    }else{// id不同
                        新增商品数据
                    }
                }
            */
            // 判断是否是第一次存储
            if ($.cookie('goods') == null) {// 第一次存储: $.cookie('goods') === null
                // 把点击的当前商品的编号id和数量num存入cookie中
                var arr = [{ id: id, num: 1 }];
                // 设置cookie
                /*
                    这里为什么要用JSON.stringify(arr)转换成字符串形式?
                        因为$.cookie()方法第二个参数传入的必须是字符串
                */
                $.cookie('goods', JSON.stringify(arr), {
                    expires: 7,
                    path: '/'
                })
            } else {// 不是第一次储存, 之前已经存储过了: $.cookie('goods')有值[{id: 1, num: 1}]
                // 取到cookie, 并转换成数组
                var array = JSON.parse($.cookie('goods'));
                // 假设没添加过
                var same = false;
                // 判断之前是否添加过(用什么判断?), 用数组中的id判断
                // 遍历
                for (var i = 0; i < array.length; i++) {
                    if (array[i].id === id) {// 之前添加过
                        // 更新same
                        same = true;
                        // 数量++
                        array[i].num++;
                        // 只要找到就退出循环
                        break;
                    }
                }
                // 之前没添加过, 新增一条数据, 并push到array数组中
                if (!same) {
                    var obj = { id: id, num: 1 };
                    array.push(obj);
                }
                // 更新cookie
                $.cookie('goods', JSON.stringify(array), {
                    expires: 7,
                    path: '/'
                });
            }
            // 当点击id为0的商品时, 渲染id为0的商品
            shopcarRender();
            sum();
        });

        // 当点击购物车商品中的编辑按钮, 使用事件委托
        $('#cartEdit').on('click', function () {
            // 隐藏编辑按钮, 显示完成按钮
            $(this).hide();
            $('#cartCom').show();
            $('.cart-edit').find('span').hide();
            $('.cart-edit').find('em').css({
                display: 'inline-block'
            });
        });

        // 当点击购物车商品中的完成按钮时
        $('#cartCom').on('click', function () {
            $(this).hide();
            $('#cartEdit').show();
            $('.cart-edit').find('span').show();
            $('.cart-edit').find('em').css({
                display: 'none'
            });
        });

        // 当点击关闭按钮时, 删除tr
        $('#cartOrderBody').on('click', '.cart-edit em', function () {
            // 先获取当前点击的id
            var id = $(this).closest('tr').attr('id');
            // console.log(id);
            if (confirm('您确定要删除该商品吗？')) {
                // 1. 把这个商品对应的cookie删除
                // 把cookie转成数组
                var arr = JSON.parse($.cookie('goods'));
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].id == id) {
                        arr.splice(i, 1);
                        break;
                    }
                }
                // 判断数组是否为空
                if (!arr.length) {
                    // 数组为空, 清空cookie
                    $.cookie('goods', null, { path: '/' });
                } else {
                    // 数组不为空, 更新cookie
                    $.cookie("goods", JSON.stringify(arr), {
                        expires: 7,
                        path: '/'
                    })
                }
                // 2. 把该tr节点移除
                $(this).closest('tr').remove();
                // 更新购物车商品数量
                sum();
            }
        });

        // 当点击购物车上的按钮+和按钮-是, input中的value更新
        $('#cartOrderBody').on('click', 'button', function () {
            // 获取当前id
            var id = $(this).closest('tr').attr('id');
            // 从cookie拿到商品数据
            var arr = JSON.parse($.cookie('goods'));
            // 符合条件的id
            var index = arr.findIndex(item => item.id == id);
            // 判断是+还是-
            if (this.innerHTML == '+') {
                // 给对应id的num++
                arr[index].num++;
                // 获取单价
                var onePrice = $(this).closest('tr').find('.cart-price-txt').html();
                // console.log(onePrice * arr[index].num);
                $(this).closest('tr').find('.cart-total-txt').html(onePrice * arr[index].num);
            } else {
                arr[index].num == 1 ? alert("不能再少了") : arr[index].num--;
                // 获取单价
                var onePrice = $(this).closest('tr').find('.cart-price-txt').html();
                // console.log(onePrice * arr[index].num);
                $(this).closest('tr').find('.cart-total-txt').html(onePrice * arr[index].num);
            }
            $.cookie("goods", JSON.stringify(arr), {
                expires: 7,
                path: '/'
            })
            //更改页面上的数据
            $(this).siblings().find("input").val(arr[index].num);
            // 更新购物车数量
            sum();
        });

        // 渲染购物车订单的数据
        function shopcarRender() {
            $.ajax({
                type: 'get',
                url: '../data/goodsList.json',
                success: function (resp) {
                    // console.log(resp);
                    // 如果有cookie, 把id=i对应的商品渲染到购物车订单上
                    // console.log($.cookie('goods'));
                    if ($.cookie('goods')) {
                        // 取对应的cookie, 结果是字符串, 转成数组
                        var arr = JSON.parse($.cookie('goods'));
                        // 遍历json数据
                        var newArr = [];
                        for (var i = 0; i < resp.length; i++) {
                            // 遍历cookie数据
                            for (var j = 0; j < arr.length; j++) {
                                // 如果json数据中有对应的id
                                // !!! 这里不能用全等, 因为json数据中的id是字符串, 而cookie中的id是数字
                                if (arr[j].id == resp[i].id) {
                                    // ? 更新后的cookie数量赋值给json数据的num
                                    resp[i].num = arr[j].num;
                                    newArr.push(resp[i]);
                                    break;
                                }
                            }
                        }
                        // console.log(newArr);
                        var html = '';
                        newArr.forEach(item => {
                            html += `
                                <tr class="cart-goods" id="${item.id}">
                                    <td class="cart-select">
                                        <div class="select-box">
                                            <label>
                                                <div class="itembox">
                                                    <i class="iconfont icon-icon-test"></i>
                                                </div>
                                                <input type="checkbox" class="select">
                                            </label>
                                        </div>
                                        <a href="javascript:;">
                                            <img src="${item.imgUrl}" alt="">
                                        </a>
                                        <a href="javascript:;" class="cart-info">
                                            <p class="cart-goods-name">${item.title}</p>
                                            <p class="cart-goods-desc">${item.desc}</p>
                                        </a>
                                    </td>
                                    <td class="cart-price">
                                        <span>￥</span>
                                        <span class="cart-price-txt">${item.price}</span>
                                    </td>
                                    <td class="cart-number">
                                        <div class="num-box">
                                            <button class="num-sub">-</button>
                                            <div class="num-input">
                                                <input type="text" value="${item.num}">
                                            </div>
                                            <button class="num-add">+</button>
                                        </div>
                                    </td>
                                    <td class="cart-total">
                                        <span>￥</span>
                                        <span class="cart-total-txt">${item.num * item.price}</span>
                                    </td>
                                    <td class="cart-edit">
                                        <span>--</span>
                                        <em>x</em>
                                    </td>
                                </tr>
                        `;
                        });
                        $('#cartOrderBody').html(html);
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            });
        }

        // 购物车订单内商品的数量
        function sum() {
            if ($.cookie('goods')) {
                var arr = JSON.parse($.cookie('goods'));
                // console.log(arr);
                // 把对象中的num都加起来
                var res = 0;
                arr.forEach(item => {
                    res += item.num;
                });
                // console.log(res);
                // 共res件商品
                $('#allCount').html(res);
            } else {
                $('#allCount').html(0);
            }
        }
    }

    return {
        checkAll: checkAll,
        addShopcar: addShopcar,
        orderLogin: orderLogin
    }
});